<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<head>
<style type="text/css">
#currentLevel{
color:red;
width:140px;
position:absolute;/*绝对定位*/
top: 370px;/*离上边距离*/
left: 800px;/*离左边距离*/
}

</style>
</head>

<c:set var="root" value="<%=request.getContextPath()%>" />

<div class="widget-box">
	<div class="widget-header header-color-pink">
		<h5>
			<i class="icon-table"></i>库水位与最小干滩长度监测分析
		</h5>
		<div class="widget-toolbar no-border">
			<button id="export" onclick="exportExcel('/export/ultrasonic_ana');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-download-alt"> 导出Excel</i>
			</button>
			<button id="read" onclick="readData('ultrasonic', '/analysis/ultrasonic');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-book"> 读取液位仪最新数据</i>
			</button>
			<button id="refresh" onclick="trans2('/analysis/ultrasonic');" class="btn btn-xs bigger btn-yellow dropdown-toggle">
				<i class="icon-refresh"> 刷新</i>
			</button>
		</div>
	</div>
	<div class="widget-body">
		<div class="widget-main no-padding">
			<table class="table table-striped table-bordered table-hover">
				<thead class="thin-border-bottom">
					<tr>
						<th class='center'  style="height:30px;">最小干滩长度cm</th>
						<th class='center'>最小干滩长度处水位线cm</th>
						<th class='center'>安装处标高cm</th>
						<th class='center'>实时水位cm</th>
						<th class='center'>水位状态</th>
						<th class='center'>干滩状态</th>
						<th class='center'>一级报警参数 (cm)</th>
						<th class='center'>二级报警参数(cm)</th>
					</tr>
				</thead>

				<tbody>
					<tr>
						<td class='center' style="height:30px;">${ultrasonic.len}&nbsp;</td>
						<td class='center'>${ultrasonic.lenh}&nbsp;</td>
						<td class='center'>${ultrasonic.height}&nbsp;</td>
						<td class='center'><fmt:formatNumber value="${ultrasonic.height-ultrasonic.should}" pattern="####.##"/>&nbsp;</td>
						<td class='center'>${(ultrasonic.height-ultrasonic.should)<=ultrasonic.lenh?'正常':'<font color="red">水位超限</font>'}&nbsp;</td>
						<td class='center'>${(ultrasonic.height-ultrasonic.should)<=ultrasonic.lenh?'正常':'<font color="red">水位超限</font>'}&nbsp;</td>
						<td class='center'>${ultrasonic.level1}&nbsp;</td>
						<td class='center'>${ultrasonic.level2}&nbsp;</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
<div class="widget-box">
	<div class="widget-body">
		<div class="widget-toolbox padding-8 clearfix">
		<label for="ymax">示意图</label>
		</div>
		<div style="margin-left: auto; margin-right: auto;">
			<span id="currentLevel">文字</span>
			<img src="${root}/resources/map/beach.jpg">
		</div>
	</div>
</div>
<script type="text/javascript">

	var currentLevel = '${ultrasonic.height-ultrasonic.should}';
	
	$(function(){
		$('#currentLevel').html('实时水位： '+currentLevel+' cm');
	});
	
	function exportExcel(urlStr) {
		var url = "/tail/" + urlStr;
		window.open(url);
	}
	
	setInterval(getWaterLevel, 1000*60*1); // 1分钟获取一次实时水位
	function getWaterLevel(){
		if(parent.showUltrasonic){
			parent.showUltrasonic();
		}
	}
</script>
<!-- 分页开始 -->
<%-- <input type="hidden" id="pageurl" value="${root}/restrt/restrt"/>
<input type="hidden" id="pageform" value="searchForm"/>
<jsp:include page="../page.jsp"></jsp:include> --%>
<!-- 分页结束 -->